<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h:head>
	<style type="text/css">

/* tamaño de fuente base */
.ui-widget .ui-widget {
	font-size: 13px;
}
/*titulo de panel*/
.panel {
	border: none !important;
	width: 1024px !important;
}
/*tabla blanca*/
table.borde1 {
	border-collapse: collapse;
	border: 1px solid #EEEAE9;
	font-size: 11px;
}
/*tabla gris*/
table.borde2 {
	border-collapse: collapse;
	background-color: #EEEAE9;
	font-size: 11px;
}
/*centrar botones*/
.centrar {
	margin: 0 auto;
}
/*celdas con borde blanco*/
td.borde1 {
	border: 1px solid white;
}
/*celdas blancas con borde gris*/
td.borde2 {
	border: 1px solid #EEEAE9;
	background-color: white;
}
/*estilo paginador*/
	.ui-paginator-bottom{
		border: none !important;
		background: none !important;
		color: black !important;
		text-align: right !important;
	}
	/*color letra botones*/
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		color: black !important;
	}
	/*color header datatable*/
	.ui-resizable-column{
		background: #EEEAE9 !important;
	}
/*borde botones*/
.ui-button-text-only {
	border: 3px solid #000000 !important;
}
/*bordes de los botones*/
.ui-corner-all {
	border-radius: 0px !important;
}
/*letra y bordes datatable*/
.ui-datatable table {
border-collapse: separate;
font-size:11px !important;
}
/* espaciado en encabezado de datatable*/
.ui-datatable th {
	white-space: normal !important;
}
/*ubicacion de icono de sort en las datatable*/
.ui-datatable .ui-sortable-column-icon {
	position: static !important;
}
/*ubicacion de icono de sort en las datatable*/
td.sort {
	font-weight: bold !important;
	text-align: center !important;
}
/*tamaño fuente input autocomplete*/
.ui-autocomplete-input {
	font-size: 11px !important;
}
/*tamaño fuente items autocomplete*/
.ui-autocomplete-panel .ui-autocomplete-list-item {
	font-size: 11px !important;
}

</style>
</h:head>
<h:body>

	<p:panel styleClass="panel">
		<p style="font-size: 11px">Bienvenido: <b>Señor(a)</b></p>
		<table width="100%" style="font-size:15px !important;">
			<tbody>
				<tr>
					<td>
						<p style="color: #A81918; font-weight:bold;">Mantenimiento de servicios</p>
					</td>

					<td align="right">
					<p style="font-weight:bold;">06 de Agosto del 2013 - 12:03</p>
					</td>
				</tr>
			</tbody>
		</table>
		<p:panel style="border: none !important;">
					<table class="borde1" width="100%">
				<tbody>
					<tr>
						<td class="borde1" style="background-color: #EEEAE9" colspan="2"><b>Datos Servicio</b></td>
					</tr>
					<tr>
						<td class="borde1" style="background-color: #EEEAE9; width: 320px">
							Tipo de Identificación de la empresa:</td>

						<td class="borde2"></td>
					</tr>
					<tr>
						<td class="borde1" style="background-color: #EEEAE9; width: 320px">No. de
							la empresa:</td>

						<td class="borde2"></td>
					</tr>
										<tr>
						<td class="borde1" style="background-color: #EEEAE9; width: 320px">Nombre de
							la empresa:</td>

						<td class="borde2"></td>
					</tr>
										<tr>
						<td class="borde1" style="background-color: #EEEAE9; width: 320px">Cliente empresarial:</td>

						<td class="borde2"></td>
					</tr>
										<tr>
						<td class="borde1" style="background-color: #EEEAE9; width: 320px">Sevicio base:</td>

						<td class="borde2">Multiabonos</td>
					</tr>
															
				</tbody>
			</table>
			
		</p:panel>
		<br />
		<p:panel style="border: none !important;">
			<table class="borde2" width="100%">
				<tbody>
					<tr>
						<td colspan="4"><b>Parametros de dispersión</b></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="codigo"
								value="Código único:" /> <h:selectOneMenu id="codigo"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="franquicia"
								value="Franquicia:" /> <h:selectOneMenu id="franquicia"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="tipoCuenta"
								value="Tipo de Cuenta:" /> <h:selectOneMenu id="tipoCuenta"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="cuentaComercio"
								value="Cuenta comercio:" /> <h:selectOneMenu
								id="cuentaComercio" value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
					<tr>
					<td class="borde1"><h:outputLabel for="tipoDispersion"
								value="Tipo Dispersión:" /> <h:selectOneMenu
								id="tipoDispersion" value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="dispersionBanco"
								value="Valor dispersión banco:" /> <p:inputText
								id="dispersionBanco" value="#{pprBean.firstname}" /></td>
						<td class="borde1"><h:outputLabel for="dispersionCliente"
								value="Valor dispersión cliente:" /> <p:inputText
								id="dispersionCliente" value="#{pprBean.firstname}" /></td>
						<td class="borde1"><h:outputLabel for="empresaDestino"
								value="Empresa destino:" /> <h:selectOneMenu
								id="empresaDestino" value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
				</tbody>
			</table>
			<table class="borde2" width="100%">
				<tbody>
					<tr>
						
						<td class="borde1" align="right"><h:outputLabel for="productoDestino"
								value="Tipo producto destino:" /> <h:selectOneMenu
								id="tProductoDestino" value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1" align="left"><h:outputLabel for="nProductoDestino"
								value="Número producto destino:" /> <h:selectOneMenu
								id="nProductoDestino" value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
				</tbody>
			</table>

			<br />
			<h:panelGrid columns="2" styleClass="centrar">
				<p:button value="Adicionar" style="font-size: 11px"></p:button>
				<p:button value="Consultar" style="font-size: 11px"></p:button>
			</h:panelGrid>

			<p:panel style="border:none !important;">
			<p:dataTable id="cars" var="car" resizableColumns="true"
				value="#{tableBean.datamodel}" paginator="true"
				paginatorPosition="bottom" rows="10"
				paginatorTemplate="Ir a la página {JumpToPageDropdown}">
				<p:column sortBy="#{car.manufacturer}" headerText="Código unico">
					<h:outputText value="" />
				</p:column>
				<p:column sortBy="#{car.manufacturer}" headerText="Franquicia">
					<h:outputText value="" />
				</p:column>

				<p:column sortBy="#{car.manufacturer}" headerText="Tipo de cuenta">
					<h:outputText value="" />
				</p:column>
				<p:column sortBy="#{car.manufacturer}" headerText="Cuenta comercio">
					<h:outputText value="" />
				</p:column>

				<p:column sortBy="#{car.manufacturer}" headerText="Tipo dispersión">
					<h:outputText value="" />
				</p:column>

				<p:column sortBy="#{car.manufacturer}"
					headerText="Valor dispersión banco">
					<h:outputText value="" />
				</p:column>
				<p:column sortBy="#{car.manufacturer}"
					headerText="Valor dispersión cliente">
					<h:outputText value="" />
				</p:column>

				<p:column sortBy="#{car.manufacturer}"
					headerText="Tipo producto destino">
					<h:outputText value="" />
				</p:column>
				<p:column sortBy="#{car.manufacturer}"
					headerText="Número producto destino">
					<h:outputText value="." />
				</p:column>
				<p:column sortBy="#{car.manufacturer}" headerText="Estado">
					<h:outputText value="" />
				</p:column>
				<p:column headerText="Acciones">
<h:outputText value="Modificar / Eliminar" />
				</p:column>
			</p:dataTable>
			</p:panel>
		</p:panel>

		<h:panelGrid columns="2" styleClass="centrar">
			<p:button value="Activar" style="font-size: 11px"></p:button>
			<p:button value="Volver" style="font-size: 11px"></p:button>
		</h:panelGrid>
		<br />
		<div style="width: 350px; margin: 0 auto; text-align: center; font-size:11px">No
			olvide activar sus órdenes de dispersión para que se realicen en el
			próximo abono a comercios.</div>

	</p:panel>

</h:body>
</html>